<template>
    <view class="addAddress">
        <form @submit="formSubmit">
            <view class="addAddress-main">
                <view class="add-item">
                    <view class="add-name">收件人</view>
                    <view class="add-right">
                        <input
                            maxlength="20"
                            type="text"
                            v-model="form.name"
                            @blur="(event) => formBlur(event, 'name')"
                            placeholder="请输入收件人"
                            placeholder-style="font-size:28rpx;color:#999;"
                        />
                    </view>
                </view>
                <view class="add-item">
                    <view class="add-name">联系方式</view>
                    <view class="add-right">
                        <input
                            type="number"
                            maxlength="11"
                            v-model="form.phone"
                            @blur="(event) => formBlur(event, 'phone')"
                            placeholder="请输入联系方式"
                            placeholder-style="font-size:28rpx;color:#999;"
                        />
                    </view>
                </view>
                <view class="add-item" style="align-items: flex-start">
                    <view class="add-name">收货地址</view>
                    <view class="add-right">
                        <pick-regions @getRegion="handleGetRegion">
                            <view class="city" v-if="form.province == ''"
                                >省市区<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/address-right.png" mode=""></image>
                            </view>
                            <view style="color: #666" class="city" v-else
                                >{{ form.province + form.city + form.area }}
                                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/address-right.png" mode=""></image>
                            </view>
                        </pick-regions>
                        <view class="add-bifo">
                            <input
                                type="text"
                                v-model="form.details"
                                @blur="(event) => formBlur(event, 'details')"
                                name="details"
                                placeholder="输入详细地址"
                                placeholder-style="font-size:28rpx;color:#999;"
                            />
                        </view>
                        <view></view>
                    </view>
                </view>
            </view>

            <view class="addAddress-main" style="margin-top: 20rpx">
                <view class="add-item">
                    <view class="add-name" style="width: 80%">设为默认地址</view>
                    <view class="add-right" style="width: 15%">
                        <u-switch
                            style="text-align: right"
                            @change="change"
                            space="2"
                            v-model="value1"
                            activeColor="#000000"
                            inactiveColor="rgba(120, 120, 128, 0.16)"
                            size="55"
                        ></u-switch>
                    </view>
                </view>
            </view>

            <view class="footer">
                <button class="footer-item" form-type="submit">确定</button>
            </view>
        </form>
    </view>
</template>

<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue';
export default {
    components: { pickRegions },
    data() {
        return {
            value1: false,
            form: {
                id: '',
                name: '',
                phone: '',
                province: '',
                city: '',
                area: '',
                details: '',
            },
            num: 0,
            isDefalut: false,
            tags: false,
            fromOrder: null,
        };
    },
    onLoad(options) {
        if (options.id) {
            this.form.id = options.id;
            uni.setNavigationBarTitle({
                title: '编辑收货地址',
            });
            this.request
                .httpTokenRequest(`/mp-api/wx/address/details/${this.form.id}`, null, 'POST', false)
                .then((res) => {
                    if (res.code == 0) {
                        this.form.name = res.data.name;
                        this.form.phone = res.data.phone;
                        this.form.province = res.data.province;
                        this.form.city = res.data.city;
                        this.form.area = res.data.area;
                        this.form.details = res.data.details;
                        this.isDefalut = res.data.status;
                        if (this.num >= 2) {
                            this.value1 = res.data.status == 1 ? true : false;
                        }
                    }
                });
        } else {
            uni.setNavigationBarTitle({
                title: '新增收货地址',
            });
        }
        if (options.num) {
            this.num = options.num;
            if (this.num < 2 && options.id) {
                this.value1 = true;
            } else if (this.num < 1 && (options.id == null || options.id == undefined)) {
                this.value1 = true;
            }
        }
        if (options.fromOrder) {
            this.fromOrder = options.fromOrder;
        }
    },
    methods: {
        formBlur(event, type) {
            const value = event.detail.value;
            this.form[type] = value;
        },
        formSubmit(e) {
            this.form.status = this.value1 ? 1 : 0;
            if (this.helper.filterSpace(this.form.name) || this.form.name == '' || this.form.name == null) {
                this.helper.showToast('请填写收件人');
                return;
            }
            if (this.helper.filterSpace(this.form.phone) || this.form.phone == '' || this.form.phone == null) {
                this.helper.showToast('请填写手机号');
                return;
            }
            var regExp = new RegExp('^1[23456789]\\d{9}$');
            if (regExp.test(this.form.phone) == false) {
                this.helper.showToast('手机号格式不正确');
                return;
            }
            if (
                this.form.province == null ||
                this.form.province == '' ||
                this.form.city == null ||
                this.form.city == '' ||
                this.form.area == null ||
                this.form.area == ''
            ) {
                this.helper.showToast('请选择省市区');
                return;
            }
            if (this.helper.filterSpace(this.form.details) || this.form.details == '' || this.form.details == null) {
                this.helper.showToast('请填写详细地址');
                return;
            }
            if (this.tags) return;
            this.tags = true;
            this.request.httpTokenJsonRequest('/mp-api/wx/address/save', this.form, 'POST', false).then((res) => {
                if (res.code != 0) {
                    this.helper.showToast(res.message);
                    return;
                }
                this.helper.showToast('提交成功');
                // if (this.fromOrder) {
                // 	uni.$emit('address', {...this.form, address: `${this.form.province || ''}${this.form.city || ''}${this.form.area || ''}${this.form.details || ''}`, id: res.data})
                // }
                setTimeout(function () {
                    uni.navigateBack();
                    this.isSending = false;
                    this.tags = false;
                }, 500);
            });
        },
        handleGetRegion(region) {
            if (region.constructor == Array) {
                if (region.length == 3) {
                    this.form.province = region[0].name;
                    this.form.city = region[1].name;
                    this.form.area = region[2].name;
                }
            }
        },
        change(e) {
            if (this.num < 2 && this.form.id != '') {
                this.value1 = true;
                return;
            } else if (this.num < 1 && this.form.id == '') {
                this.value1 = true;
                return;
            }
            this.value1 = e;
        },
    },
};
</script>
